import React from 'react'
import { Row, Col, Slider, Typography, Space } from 'antd'
import { Utils } from '../../utils'

const { Text } = Typography

const ExperimentParameters = ({ parameters, onParameterChange }) => {
  const handleSliderChange = (key, value) => {
    onParameterChange(key, value)
  }

  const parameterConfigs = [
    {
      key: 'length',
      label: '摆长 (cm)',
      min: 30,
      max: 165,
      step: 1,
      value: parameters.length,
      formatter: (value) => `${Utils.formatNumber(value, 1)} cm`,
      color: '#4fc3f7'
    },
    {
      key: 'angle',
      label: '角度 (°)',
      min: 0,
      max: 30,
      step: 0.1,
      value: parameters.angle,
      formatter: (value) => `${Utils.formatNumber(value, 1)}°`,
      color: '#66bb6a'
    },
    {
      key: 'smoothing',
      label: '平滑',
      min: 0.1,
      max: 0.9,
      step: 0.1,
      value: parameters.smoothing,
      formatter: (value) => Utils.formatNumber(value, 1),
      color: '#ffa726'
    },
    {
      key: 'prediction',
      label: '预测',
      min: 0.05,
      max: 0.2,
      step: 0.01,
      value: parameters.prediction,
      formatter: (value) => Utils.formatNumber(value, 2),
      color: '#ab47bc'
    }
  ]

  return (
    <div className="experiment-parameters">
      <Row gutter={[0, 16]}>
        {parameterConfigs.map((config) => (
          <Col span={24} key={config.key}>
            <div className="parameter-item">
              <div className="parameter-header">
                <Text strong style={{ color: config.color }}>
                  {config.label}
                </Text>
                <Text 
                  className="parameter-value"
                  style={{ 
                    color: '#ffffff',
                    fontFamily: 'monospace',
                    fontSize: '14px',
                    fontWeight: 'bold'
                  }}
                >
                  {config.formatter(config.value)}
                </Text>
              </div>
              <Slider
                min={config.min}
                max={config.max}
                step={config.step}
                value={config.value}
                onChange={(value) => handleSliderChange(config.key, value)}
                tooltip={{
                  formatter: config.formatter,
                  placement: 'top'
                }}
                trackStyle={{ 
                  background: `linear-gradient(90deg, ${config.color}, ${config.color}dd)` 
                }}
                handleStyle={{
                  borderColor: config.color,
                  backgroundColor: '#ffffff',
                  boxShadow: `0 2px 8px ${config.color}33`
                }}
                railStyle={{
                  backgroundColor: 'rgba(255, 255, 255, 0.2)'
                }}
              />
            </div>
          </Col>
        ))}
      </Row>
    </div>
  )
}

export default ExperimentParameters
